<!--
 * @Author: Shber
 * @Date: 2024-07-01 15:49:30
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-03 17:54:51
 * @Description: 
-->
<template>
<view class="content">
  <view class="white_card box">
    <view class="title_group">
      <text class="h3">打印云盒</text>
      <view class="block_list">
        <view class="item mr_10"><view class="block_tip mr_5 tip_green"></view> <text>在线</text></view>
        <view class="item mr_10"><view class="block_tip mr_5"></view> <text>离线</text></view>
        <view class="item"><view class="block_tip mr_5 tip_orange"></view> <text>缺纸</text></view>
      </view>
    </view>

    <view class="box_row mt_20">
      <view class="row_item mr_5">
        <image class="item_pic" mode="aspectFill" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image>
        <text class="p mt_10">达达</text>
      </view>
      <view class="row_item ml_5">
        <image class="item_pic" mode="aspectFill" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image>
        <text class="p mt_10">自配送</text>
      </view>
    </view>
  </view>

  <view class="white_card mt_10 switch">
    <view>
      <text class="h3">自动打印</text>
      <text class="h4 mt_5">开启后麦芽田自动控制打印机出票</text>
    </view>
    <tm-switch offIcon="tmicon-times" color="green" size="mini"></tm-switch>
  </view>
</view>

</template>
<script setup>

</script>
<style lang="scss" scoped>
.content{padding: 10px}
.title_group{font-size: 14px; display: flex; justify-content: space-between; align-items: center; color: #666;
  .block_tip{width: 30px; height: 10px; background-color: #999;}
  .block_list, .item{display: flex; align-items: center;}
  .tip_green{background-color: #4ec752;}
  .tip_orange{background-color: #ffa114;}
}

.box_row{display: flex;}
.row_item{flex: 1; border-radius: 4px; background-color: #F4F4F4; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;
.p{font-size: 14px;}
.item_pic{width: 40px; height: 40px; border-radius: 50%;}

}

.switch{
  display: flex; justify-content: space-between; align-items: center;
}
.h3, .h4{font-size: 14px; display: block;}
.h3{ font-size: 16px; color: #333;}
.h4{color: #666;}
</style>